<script setup>
import { ref, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";

// 国际化
import { useI18n } from "vue-i18n";
import axios from "axios";

const I18n = useI18n();
const { locale } = useI18n();

let lang = ref(locale.value);

let activeName = ref("first");

const router = useRouter();
const route = useRoute();

// 跳转页面
const jumpTo = (path) => {
  router.push(path);
};

// 修改当前模块
const handleClick = (val) => {};

// 订单id
const orderId = ref("");
const selectOrder = ref("");
// 订单
const tableData2 = ref([
  {
    orderId: "cp1236547894122",
    coverUrl: "/img/v2_smj2r4.png",
    name: "110g蓝色PE篷布",
    num: 20,
    price: 2719,
    status: "已完成",
    createTime: "2024-11-10",
    id: 1,
  },
  {
    orderId: "cp1236547894122",
    coverUrl: "/img/v2_smj2r4.png",
    name: "110g蓝色PE篷布",
    num: 20,
    price: 2719,
    status: "已完成",
    createTime: "2024-11-10",
    id: 2,
  },
  {
    orderId: "cp1236547894122",
    coverUrl: "/img/v2_smj2r4.png",
    name: "110g蓝色PE篷布",
    num: 20,
    price: 2719,
    status: "已完成",
    createTime: "2024-11-10",
    id: 3,
  },
  {
    orderId: "cp1236547894122",
    coverUrl: "/img/v2_smj2r4.png",
    name: "110g蓝色PE篷布",
    num: 20,
    price: 2719,
    status: "已完成",
    createTime: "2024-11-10",
    id: 4,
  },
  {
    orderId: "cp1236547894122",
    coverUrl: "/img/v2_smj2r4.png",
    name: "110g蓝色PE篷布",
    num: 20,
    price: 2719,
    status: "已完成",
    createTime: "2024-11-10",
    id: 5,
  },
  {
    orderId: "cp1236547894122",
    coverUrl: "/img/v2_smj2r4.png",
    name: "110g蓝色PE篷布",
    num: 20,
    price: 2719,
    status: "已完成",
    createTime: "2024-11-10",
    id: 6,
  },
]);

// 多选
const handleSelectionChange = () => {};

// 用户名
let name = ref("");
let phone = ref("");
let email = ref("");

let memo = ref("");

const searchVal = ref("");
const orderList = ref([]);
const getOrderList = async () => {
  try {
    const res = await axios.get(
      `${apiUrl}/order/list?type=4&search=${searchVal.value}&page=1&limit=100`,
      {
        headers: {
          "Authori-zation": `Bearer ${getToken()}`,
        },
      }
    );

    if (res.data.status === 200) {
      orderList.value = res.data.data;
    }
  } catch (e) {}
};

const getOrderStatusName = (order) => {
  if (order.status === 0 && order.paid === 0) {
    return "待付款";
  }
  if (order.status === 0 && order.paid === 1) {
    return "待发货";
  }
  if (order.status === 1) {
    return "待收货";
  }
  if (order.status === 2) {
    return "带评价";
  }
  if (order.status === 3) {
    return "已完成";
  }
};

const subumit = async () => {
  if (selectOrder === "") {
    ElMessage({
      message: "请选择订单",
      type: "warning",
    });
    return;
  }
  if (memo.value === "") {
    ElMessage({
      message: "请填写问题内容",
      type: "warning",
    });
    return;
  }
  if (name.value === "") {
    ElMessage({
      message: "请输入姓名",
      type: "warning",
    });
    return;
  }

  if (phone.value === "") {
    ElMessage({
      message: "请输入联系方式",
      type: "warning",
    });
    return;
  }

  if (phone.email === "") {
    ElMessage({
      message: "请输入邮箱",
      type: "warning",
    });
    return;
  }

  const info = JSON.parse(localStorage.getItem("info"));
  const order = orderList.value.filter((item) => item.order_id === selectOrder.value)[0];

  const data = {
    uid: info.uid,
    gid: 86,
    value: JSON.stringify({
      order: order,
      name: name.value,
      phone: phone.value,
      email: email.value,
      memo: memo.value,
      status: 0,
      reply: "",
    }),
    add_time: Math.floor(Date.now() / 1000),
  };
  try {
    const res = await axios.post(`${apiUrl}/pc/insert_inquire_data`, data, {
      headers: {
        "Authori-zation": `Bearer ${getToken()}`,
      },
    });

    if (res.data.status === 200) {
      ElMessage({
        message: "售后已经提交",
        type: "success",
      });
      selectOrder.value = "";
      phone.value = "";
      memo.value = "";
      name.value = "";
    }
    getAfterList();
  } catch (e) {
    console.log(e);
  }
};

const afterList = ref([]);
const getAfterList = async () => {
  const info = JSON.parse(localStorage.getItem("info"));
  const uid = info.uid;
  try {
    const res = await axios.post(
      `${apiUrl}/pc/get_inquire_list`,
      { uid, gid: 86 },
      {
        headers: {
          "Authori-zation": `Bearer ${getToken()}`,
        },
      }
    );

    if (res.data.status === 200) {
      afterList.value = res.data.data;
      afterList.value.forEach((item) => (item.value = JSON.parse(item.value)));
    }
  } catch (e) {}
};
onMounted(() => {
  getOrderList();
  getAfterList();
});
</script>

<template>
  <div class="middle">
    <div class="topMenu">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="$t('after.tab1')" name="first">
          <div class="searchBox">
            <div class="label">{{ $t("after.searchLabel") }}</div>
            <div class="search">
              <el-input
                v-model="searchVal"
                style="width: 240px"
                :placeholder="$t('after.searchPlace')"
                :suffix-icon="Search"
                @input="getOrderList"
              />
            </div>
          </div>

          <div class="tableBox">
            <el-table ref="orderList1" :data="orderList" style="width: 100%">
              <el-table-column width="50"
                ><template #default="scope"
                  ><el-radio-group v-model="selectOrder"
                    ><el-radio
                      @click="selectOrder = scope.row.order_id"
                      :value="scope.row.order_id" /></el-radio-group></template
              ></el-table-column>
              <el-table-column prop="order_id" :label="$t('after.td1')" min-width="100"
                ><template #default="scope"
                  ><div
                    @click="jumpTo('myorder?id=' + scope.row.order_id)"
                    style="cursor: pointer"
                  >
                    {{ scope.row.order_id }}
                  </div></template
                ></el-table-column
              >
              <el-table-column :label="$t('after.td2')" min-width="200">
                <template #default="scope">
                  <div
                    class="productBox"
                    v-for="(oitem, oindex) in scope.row.cartInfo"
                    :key="oindex"
                  >
                    <div
                      class="coverBox"
                      @click="jumpTo('/productDetail?id=' + oitem.productInfo.id)"
                      style="cursor: pointer"
                    >
                      <img :src="oitem.productInfo.image" />
                    </div>

                    <div
                      class="name"
                      @click="jumpTo('/productDetail?id=' + oitem.productInfo.id)"
                      style="cursor: pointer"
                    >
                      {{ oitem.productInfo.store_name }}
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column property="num" :label="$t('after.td3')">
                <template #default="scope">
                  <div v-for="(oitem, oindex) in scope.row.cartInfo" :key="oindex">
                    {{ oitem.cart_num }} {{ $t("productList.unit") }}
                  </div>
                </template></el-table-column
              >
              <el-table-column prop="cost" :label="$t('after.td4')" />
              <el-table-column prop="status" :label="$t('after.td5')">
                <template #default="scope">
                  {{ getOrderStatusName(scope.row) }}
                </template>
              </el-table-column>
              <el-table-column prop="_add_time" :label="$t('after.td6')" />
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('after.tab2')" name="second">
          <div class="searchBox">
            <div class="label">{{ $t("after.searchLabel") }}</div>
            <div class="search">
              <el-input
                v-model="orderId"
                style="width: 240px"
                :placeholder="$t('after.searchPlace')"
                :suffix-icon="Search"
              />
            </div>
          </div>

          <div class="tableBox">
            <el-table ref="orderList1" :data="afterList" style="width: 100%">
              <el-table-column type="selection" width="55" />

              <el-table-column property="order_id" :label="$t('after.td1')"
                ><template #default="scope">{{
                  scope.row.value.order.order_id
                }}</template></el-table-column
              >
              <el-table-column :label="$t('after.td2')" min-width="200">
                <template #default="scope">
                  <div
                    class="productBox"
                    v-for="(oitem, oindex) in scope.row.value.order.cartInfo"
                    :key="oindex"
                  >
                    <div
                      class="coverBox"
                      @click="jumpTo('/productDetail?id=' + oitem.productInfo.id)"
                      style="cursor: pointer"
                    >
                      <img :src="oitem.productInfo.image" />
                    </div>

                    <div
                      class="name"
                      @click="jumpTo('/productDetail?id=' + oitem.productInfo.id)"
                      style="cursor: pointer"
                    >
                      {{ oitem.productInfo.store_name }}
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column property="order_id" :label="$t('after.td3')"
                ><template #default="scope">
                  <div
                    v-for="(oitem, oindex) in scope.row.value.order.cartInfo"
                    :key="oindex"
                  >
                    {{ oitem.cart_num }} {{ $t("productList.unit") }}
                  </div>
                </template></el-table-column
              >
              <el-table-column property="cost" :label="$t('after.td4')"
                ><template #default="scope">{{
                  scope.row.value.order.cost
                }}</template></el-table-column
              >

              <el-table-column property="status" :label="$t('after.td5')"
                ><template #default="scope">
                  {{ getOrderStatusName(scope.row.value.order) }}
                </template></el-table-column
              >
              <el-table-column property="createTime" :label="$t('after.td6')"
                ><template #default="scope">{{
                  scope.row.value.order._add_time
                }}</template></el-table-column
              >
              <el-table-column property="createTime" label="回复"
                ><template #default="scope">{{
                  scope.row.value.reply
                }}</template></el-table-column
              >
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>

  <div class="feedback">
    <div class="middle">
      <div class="leftBox">
        <div class="title">{{ $t("after.bottomTitle1") }}</div>
        <div class="desc">{{ $t("after.bottomDesc1") }}</div>
        <div class="feedbackImgBox">
          <img :src="$t('after.img')" alt="" />
        </div>
      </div>
      <div class="rightBox">
        <div class="title">{{ $t("after.bottomTitle2") }}</div>
        <div class="inputBox">
          <div class="left">
            <el-input
              v-model="memo"
              type="textarea"
              style="width: 420px"
              rows="6"
              :placeholder="$t('after.bottomDesc2')"
            />
          </div>

          <div class="right">
            <el-input
              v-model="name"
              class="bottomInput"
              style="width: 350px"
              :placeholder="$t('after.namePlace')"
            />
            <el-input
              v-model="phone"
              class="bottomInput"
              style="width: 350px"
              :placeholder="$t('after.phonePlace')"
            />
            <el-input
              v-model="email"
              class="bottomInput"
              style="width: 350px"
              placeholder="邮箱"
            />
            <el-button
              type="primary"
              @click="subumit()"
              style="width: 100%; margin-top: 16px"
              >{{ $t("after.btn") }}</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.topMenu {
  margin-top: 30px;
}

.searchBox {
  display: flex;
  margin-top: 15px;

  .label {
    line-height: 30px;
    margin-right: 20px;
  }
}

::v-deep .el-input__wrapper {
  border-radius: 0;
}

.productBox {
  display: flex;

  .coverBox {
    width: 50px;
    height: 50px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .name {
    line-height: 50px;
    font-weight: bold;
  }
}

.tableBox {
  margin-top: 20px;
  margin-bottom: 50px;
  min-height: calc(100vw - 1000px);
}

.feedback {
  background-color: #f6f6f6;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  padding: 16px 0;

  .middle {
    display: flex;

    .title {
      font-size: 16px;
      font-weight: bold;
      margin-top: 40px;
      margin-bottom: 20px;
    }

    .leftBox {
      width: 500px;
      position: relative;
      padding-right: 100px;

      &::after {
        content: "";
        width: 1px;
        height: 170px;
        background-color: #dcdcdc;
        position: absolute;
        right: 0;
        top: 100px;
      }

      .feedbackImgBox {
        width: 100%;
        margin-top: 30px;
        margin-bottom: 60px;
        img {
          width: 100%;
        }
      }

      .desc {
        color: #666;
        font-size: 12px;
      }
    }

    .rightBox {
      width: 50%;
      padding-left: 100px;

      .title {
        margin-top: 70px;
      }
    }
  }
}

.inputBox {
  display: flex;

  .left {
    margin-right: 30px;
  }
}

::v-deep .bottomInput .el-input__wrapper {
  background-color: rgba(0, 0, 0, 0);
  box-shadow: none;
  border-bottom: 1px solid #dcdcdc;
  margin-bottom: 10px;
}
</style>
